<template>
  <div class="fm-widget-form-container">
    <div v-if="data.list.length == 0" class="fm-widget-form-empty">
      {{ $t('m.portalDesign.description.containerEmpty') }}
    </div>

    <a-form
      class="widget-form-content"
      :size="data.config.size"
      label-suffix=":"
      :label-position="data.config.labelPosition"
      :label-width="data.config.labelWidth + 'px'"
    >
      <draggable
        class=""
        v-model="data.list"
        v-bind="{ group: 'people', ghostClass: 'ghost', animation: 200, handle: '.drag-widget' }"
        @end="handleMoveEnd"
        @add="handleWidgetAdd"
      >
        <grid-layout
          :layout.sync="layout"
          :col-num="12"
          :row-height="10"
          :is-draggable="true"
          :is-resizable="true"
          :is-mirrored="false"
          :vertical-compact="true"
          :margin="[0, 0]"
          :use-css-transforms="true"
        >
          <grid-item
            v-for="(item, index) in layout"
            :minH="10"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.key"
          >
            <transition-group v-if="item" name="fade" tag="div" class="fm-widget-form-list">
              <widget-form-item
                :key="item.key"
                :element="item"
                :select.sync="selectWidget"
                :index="index"
                :data="data"
                @handleWidgetOpensSet="handleWidgetOpensSet"
              />
            </transition-group>
            <div v-else style="width: 100%; height: 100%; background-color: #85e3fd">
              {{ item.i }}
            </div>
          </grid-item>
        </grid-layout>
      </draggable>
    </a-form>
  </div>
</template>

<script>
import Draggable from 'vuedraggable';
import VueGridLayout from 'vue-grid-layout';
import WidgetFormItem from './WidgetFormItem';
export default {
  components: {
    Draggable,
    WidgetFormItem,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  props: ['data', 'select'],
  data() {
    return {
      layout: [],
      selectWidget: this.select
    };
  },
  mounted() {
    document.body.ondrop = function (event) {
      let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
      if (isFirefox) {
        event.preventDefault();
        event.stopPropagation();
      }
    };
  },
  methods: {
    handleMoveEnd({ newIndex, oldIndex }) {
      //console.log('index', newIndex, oldIndex);
    },
    handleSelectWidget(index) {
      //console.log(index, '#####');
      this.selectWidget = this.data.list[index];
    },
    handleWidgetAdd(evt) {
      const newIndex = evt.newIndex;
      //为拖拽到容器的元素添加唯一 key
      const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999);
      this.data.list[newIndex]['i'] = this.data.list.length - 1 + '';
      let item = {
        ...this.data.list[newIndex],
        options: {
          ...this.data.list[newIndex].options,
          remoteFunc: 'func_' + key
        },
        key,
        // 绑定键值
        model: this.data.list[newIndex].type + '_' + key,
        rules: []
      };
      if (newIndex == 1) {
        item['y'] = this.data.list[0].y + this.data.list[0].h;
      }

      this.$set(this.data.list, newIndex, item);
      if (newIndex == 1) {
        let arr = []
        this.data.list.map((tim, index)=> {
          if(index !== 1) {
            arr.push(tim)
          }
        });
        arr.push(item);
        this.data.list = arr
      }
      if (this.data.list[newIndex].type === 'grid') {
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          columns: this.data.list[newIndex].columns.map(item => ({ ...item }))
        });
      }

      this.layout = this.data.list;
      if(newIndex == 1){
        this.selectWidget = this.data.list[this.data.list.length-1];
      }else{
        this.selectWidget = this.data.list[newIndex];
      }

    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {};
        } else {
          this.selectWidget = this.data.list[index - 1];
        }
      } else {
        this.selectWidget = this.data.list[index + 1];
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    },
    handleWidgetOpensSet() {
      this.$emit('handleWidgetOpensSet');
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val);
      },
      deep: true
    },
    data(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.layout = this.data.list;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.widget-form-content {
  margin: 10px 10px 10px 10px;
  border: 2px dashed;
  border-color: #999;
  border-radius: 0;
  padding: 5px;
}
/deep/.vue-grid-layout {
  min-height: 400px;

  .vue-grid-item {
    padding: 7px;
    .fm-widget-col-list {
      height: 100%;
    }
    .vue-resizable-handle {
      display: inline-block;
      background: none;
    }
    .vue-resizable-handle:after {
      content: '';
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid #a7a8aa;
      bottom: 10px;
      right: 10px;
      border-top-color: transparent;
      border-left-color: transparent;
    }
  }
}
</style>
